<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<link rel="stylesheet" href="../common.css" />
<style>
  /* .container {
    width: 650px;
    height: 300px;
    border: 1px solid;
    border-image: linear-gradient(180deg,
        rgba(140, 216, 255, 1),
        rgba(56, 147, 210, 0.46)) 1 1;
    backdrop-filter: blur(5px);
  } */

  :root {
    --bg: #222;
    --wave1: #a0edff;
    --wave2: rgba(40, 187, 255, 0.5);
    --wave3: #2084cc;
  }

  body {
    background: var(--bg);
  }

  .box {
    width: 650px;
    height: 300px;
    background: linear-gradient(270deg,
        rgba(29, 170, 210, 0) 0%,
        rgba(29, 170, 210, 0.1) 13%,
        rgba(29, 170, 210, 0.4) 49%,
        rgba(29, 170, 210, 0.1) 84%,
        rgba(29, 170, 210, 0) 100%);
    border: 1px solid;
    border-image: linear-gradient(270deg,
        rgba(81, 201, 232, 0),
        rgba(56, 187, 222, 1),
        rgba(30, 172, 212, 0)) 1 1;
    margin-bottom: 120px;
  }

  .box-inner {
    width: 200px;
    height: 200px;
    box-shadow: 0px 2px 7px 0px #238fdb;
    border-radius: 50%;
    position: relative;
    border: 2px solid transparent;
    background-image: linear-gradient(#021f40, #021f40),
      linear-gradient(180deg, rgba(36, 144, 220, 0.41), rgba(37, 147, 225, 1));
    background-origin: border-box;
    background-clip: content-box, border-box;
    overflow: hidden;
    /* 溢出隐藏 */
  }

  .inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background: #a0edff;
    /* 底部100% +波浪的实际高度，bottom: calc(-100% - 60px); */
    /* bottom: -128%; */
    /* 直接对bottom操作 */
    bottom: calc(-128% + var(--per));
    /* 或者y方向偏移*/
    /* transform: translateY(calc(0% - var(--per))); */
    /* transition: all 2s; */
  }


  .box-waves {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 200%;
    /* 宽度去掉border的 2px 196* 2 =width: 392px;* /
    /* (140 * 392) / 600px=height: 92px; */
    stroke: none;
    /* svg重合有一条线 方法一： 设置阴影缓和*/
    /* box-shadow: 0 10px 4px 4px var(--wave1); */
  }

  .box-waves:nth-child(1) {
    fill: var(--wave1);
    transform: translate(-50%, 0);
    z-index: 3;
    animation: wave-move1 1.5s linear infinite;
    /* svg重合有一条线 方法2：主颜色底边距-2px*/
    margin-bottom: -2px;
  }

  .box-waves:nth-child(2) {
    fill: var(--wave2);
    transform: translate(0, 0);
    z-index: 2;
    animation: wave-move2 3s linear infinite;
  }

  .box-waves:nth-child(3) {
    fill: var(--wave3);
    transform: translate(-50%, 0);
    z-index: 1;
    animation: wave-move1 3s linear infinite;
  }


  @keyframes wave-move1 {
    100% {
      transform: translate(0, 0);
    }
  }

  @keyframes wave-move2 {
    100% {
      transform: translate(-50%, 0);
    }
  }

  .box-text {
    font-size: 30px;
    font-weight: bold;
    width: 80px;
    margin-left: 20px;
    text-align: center;
    color: #7EEDFF;
  }
</style>

<body>
  <div class="box flex-row j_c">
    <div class="box-inner">
      <div class="inner" style="--per:0%" id="box">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 600 140" class="box-waves">
          <path d="M 0 70 Q 75 20,150 70 T 300 70 T 450 70 T 600 70 L 600 140 L 0 140 L 0 70Z">
          </path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 600 140" class="box-waves">
          <path d="M 0 70 Q 75 20,150 70 T 300 70 T 450 70 T 600 70 L 600 140 L 0 140 L 0 70Z">
          </path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 600 140" class="box-waves">
          <path d="M 0 70 Q 75 20,150 70 T 300 70 T 450 70 T 600 70 L 600 140 L 0 140 L 0 70Z">
          </path>
        </svg>
      </div>
    </div>
    <div id="percentText" class="box-text">--%</div>
  </div>
</body>
<script>
  // getComputedStyle(box).getPropertyValue('--per'); // 获取当前CSS变量
  const getData = () => {
    const box = document.getElementById('box');
    const text = document.getElementById('percentText');
    let i = 0;
    let timer = null;
    const loading = () => {
      if (i < 100) {
        i++;
        box.style.setProperty('--per', i + '%'); // 设置CSS变量
        text.innerHTML = i + '%';
      } else {
        i = 0;
        clearInterval(timer);
        setTimeout(() => {
          text.innerHTML = '0%';
          box.style.setProperty('--per', '0%'); // 设置CSS变量
          timer = setInterval(loading, 1000);
        }, 2000);
      }
    }
    loading();
    timer = setInterval(loading, 1000);
  }
  getData();
</script>

</html>